import React from 'react';
import { FiMenu, FiBell, FiUser, FiSearch } from 'react-icons/fi';

const Header = ({ onMenuClick, onNavClick, activePage }) => {
  const navItems = [
    { id: 'home', label: '首页', path: '/' },
    { id: 'market', label: '市场分析', path: '/market' },
    { id: 'strategy', label: '持仓策略', path: '/strategy' },
    { id: 'training', label: '模型训练', path: '/training' },
  ];

  return (
    <header className="app-header">
      <div className="header-left">
        <button className="menu-btn" onClick={onMenuClick}>
          <FiMenu size={20} />
        </button>
        <div className="logo">
          <span className="logo-text">QuantVision</span>
          <span className="logo-badge">PRO</span>
        </div>
      </div>
      
      <nav className="main-nav">
        {navItems.map(item => (
          <button
            key={item.id}
            className={`nav-item ${activePage === item.id ? 'active' : ''}`}
            onClick={() => onNavClick(item.id)}
          >
            {item.label}
            {activePage === item.id && <div className="nav-indicator"></div>}
          </button>
        ))}
      </nav>
      
      <div className="header-right">
        <div className="search-box">
          <FiSearch className="search-icon" />
          <input type="text" placeholder="搜索市场、股票或策略..." />
        </div>
        <button className="notification-btn">
          <FiBell size={20} />
          <span className="notification-badge">3</span>
        </button>
        <div className="user-profile">
          <div className="avatar">
            <FiUser size={18} />
          </div>
          <span className="username">分析师_张伟</span>
        </div>
      </div>
    </header>
  );
};

export default Header;